<template>
    <view class="relative full-screen">
        <uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="white" @clickLeft="goBack">
            <template v-slot:left>
                <image class="size-32" src="@/static/svg/icon-back.svg" />
            </template>
            <view class="flex center w-full fs-16 text-black text-color-regular">我的订阅</view>
        </uni-nav-bar>
        <view class="py-12" :style="{ height: `calc(100vh - ${navBarHeight || 0}px)` }">
            <view class="px-16">
                <view v-for="(item, i) in dataList" :key="item.businessId"
                    class="flex justify-between item-center uni-bg-white radius-8 px-12 py-8 mb-12">
                    <view class="flex item-center flex-auto" @click="go2Merchant(item)">
                        <view class="mr-8 relative">
                            <image class="w-44 h-44 round" :src="item.businessLogo" style="border: 0.5px solid #fff;">
                            </image>
                        </view>
                        <view>
                            <view class="fs-14 c3 mb-4">{{ item.businessShortName }}</view>
                            <view class="fs-12 c3-6">
                                {{ item.subscribeUserNum }}人订阅 | {{ item.inProgressActiveNum }}个活动
                            </view>
                        </view>
                    </view>
                    <view class="c3-6">
                        <subscribe-button class="flex-shrink" :userId="userStore.userInfo && userStore.userInfo.id"
                            :businessId="item.businessId" :state="item.subscribeState"
                            @onStateChange="toRefresh($event, i)" />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup name="MySubscribe">
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, onBeforeUnmount } from 'vue'
import { mySubscribeBusinessApi } from '@/pagesH/api/subscribe.js'
import { useUserStore } from '@/stores/modules/user.js'

const userStore = useUserStore()

const deviceBack = ref(true) // 设备返回键或屏幕左滑返回
const goBack = () => {
    uni.navigateBack()
}
const from = ref('')

onBeforeUnmount(() => {
    console.log('页面关闭', deviceBack.value, from.value)
    if (deviceBack.value) {
        goBack()
    }
})

const navBar = ref(null)
const navBarHeight = computed(() => {
    const statusBarHeight = uni.getWindowInfo().statusBarHeight
    const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
    return navigationBarHeight
})

const dataList = ref([])

const getMySubscribe = () => {
    mySubscribeBusinessApi().then(res => {
        dataList.value = res?.map(item => {
            return {
                ...item,
                subscribeState: 2
            }
        }) || [];
    }).catch(err => console.log(err))
};

const toRefresh = (data, itemInd) => {
    if (data !== 0) return;
    uni.showToast({
        title: `${dataList.value[itemInd].subscribeState === 1 ? '订阅' : '取消订阅'}成功！`,
        icon: 'none'
    })
    dataList.value[itemInd].subscribeState = dataList.value[itemInd].subscribeState === 1 ? 2 : 1;

}

const go2Merchant = (item) => {
    uni.navigateTo({
        url: `/pagesA/merchant/homepage?id=${item.businessId}`
    })
}

onLoad((options) => {
    getMySubscribe();
})

</script>
